{include file="public/header" /}

<link href="__PUBLIC__/js/jquery-plugin/imgareaselect/css/imgareaselect-default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="__PUBLIC__/js/jquery-plugin/imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>
<style type="text/css">
.upload-box{ margin-top: 30px; }
.upload_head_cont{ background: #FFF; padding: 10px; overflow: hidden; }
.upload_head{ margin: auto; width: 530px; overflow: hidden}
#preview-pane { float: left; margin-left: 30px; }

#preview-pane .preview-container { width: 200px; overflow: hidden; text-align: left; }

.img-opt,.img-data{ overflow: hidden; }
.upload-opt{ overflow: hidden; margin-top: 5px; text-align: center; }
.swfupload{ left: 0px; }
#file_upload{ height: 40px; margin: auto; }
#upload_queue_list{ display: none; }

.upload-pic{ margin: auto;}
.upload-pic-select{ float: left; width:300px; }
.select-img{ width: 300px; background: #e5e5e5; overflow: hidden; }
.upload-pic-select img{ width: 300px; }
.upload-img{ display: none; }
.upload-file-btn{ height: 30px; width: 300px; padding: 135px 0px; text-align: center; overflow: hidden; }

.uploadify-button{ background-image:none; background-color: #535353; border-radius:5px; border:0px; font-weight: normal; }
.crop-preview-big,.crop-preview-big img{ width: 190px; height: 190px; overflow: hidden; background: #e5e5e5; }
.crop-preview-small{ margin-top: 10px; }
.crop-preview-small,.crop-preview-small img{ width: 100px; height: 100px; background: #e5e5e5; overflow: hidden; }
.upload-tip{ text-align: left; margin-bottom: 10px; line-height: 22px; }
.upload-tip b{ font-size: 14px; }
.webuploader-pick{background: #46494A;}
.btn-success{background: #ff6e32;border-color: #ff6e32}
.btn-success:hover{background: #ed662e;border-color: #ed662e}
</style>
<div class="container mtb-15">
	{include file="user_setting/left_nav" /}
	<div class="user-setting col-md-10 form-horizontal">
		<h2 class="h3 post-title">{$_cur_title}</h2>
		<div class="row mt-30">
			<div class="upload-box">
				<div class="upload_head">
					<div class="upload-pic">
						<div class="upload-pic-select">
							<div class="select-img">
								<div class="upload-file-btn">
									<div class="filePicker-head">从电脑上选择照片</div>
								</div>
								<img src="{$head_url}" class="upload-img">
							</div>
							<div class="upload-opt">
								<form action="" class="upload-head-form" method="post">
									<input type="hidden" value="{$file_id}" name="file_id" class="file_id">
									<input type="hidden" value="" name="x1" class="crop-x1">
									<input type="hidden" value="" name="y1" class="crop-y1">
									<input type="hidden" value="" name="x2" class="crop-x2">
									<input type="hidden" value="" name="y2" class="crop-y2">
									<input type="hidden" value="" name="width" class="img-width">
									<input type="hidden" value="" name="height" class="img-height">
									<span class="btn reupload-head btn-default" style="display:none">重新上传</span>
									<span class="btn btn-success save-head">保存</span>
								</form>
							</div>
						</div>
						<div id="preview-pane">
							<div class="preview-container">
								<div class="crop-preview-big">
									<img src="{$user['head_id'] ? img($user['head_url'], 200, 200) : ($user['sso_head_url'] ? $user['sso_head_url'] : img($user['head_url'], 200, 200))}">
								</div>
								<div class="crop-preview-small">
									<img src="{$user['head_id'] ? img($user['head_url'], 200, 200) : ($user['sso_head_url'] ? $user['sso_head_url'] : img($user['head_url'], 200, 200))}">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var imgAreaSelectApi;
function crop_img () {
	imgAreaSelectApi = $('.upload-img').imgAreaSelect({
		persistent : true,  // true，选区以外点击不会启用一个新选区（只能移动/调整现有选区）
		instance : true,    // true，返回一个imgAreaSelect绑定到的图像的实例，可以使用api方法 
		aspectRatio: '1:1',
		minWidth : 190,   // 选取的最小宽度
		minHeight : 190,  // 选取的最小高度  
		handles: true,
		fadeSpeed: 200,
		hide:false,
		x1: 0,
		y1: 0,
		x2: 190,
		y2: 190,
		onSelectChange:preview
	});
	return imgAreaSelectApi;
}
function preview(img, selection) {
	if (!selection.width || !selection.height){
		return;
	}

	var scaleX = 190 / selection.width;
	var scaleY = 190 / selection.height;

	$('.crop-preview-big img').css({
		width: Math.round(scaleX * $('.upload-img').width()),
		height: Math.round(scaleY *  $('.upload-img').height()),
		marginLeft: -Math.round(scaleX * selection.x1),
		marginTop: -Math.round(scaleY * selection.y1)
	});

	scaleX = 100 / selection.width;
	scaleY = 100 / selection.height;

	$('.crop-preview-small img').css({
		width: Math.round(scaleX * $('.upload-img').width()),
		height: Math.round(scaleY *  $('.upload-img').height()),
		marginLeft: -Math.round(scaleX * selection.x1),
		marginTop: -Math.round(scaleY * selection.y1)
	});

	$('.crop-x1').val(selection.x1);
	$('.crop-y1').val(selection.y1);
	$('.crop-x2').val(selection.x2);
	$('.crop-y2').val(selection.y2);
	$('.img-width').val($('.upload-img').width());
	$('.img-height').val($('.upload-img').height());
}
$(document).ready(function () {

	$('.reupload-head').click(function () {
		jumpurl('{:url("change_head")}');
	});

	$('.save-head').click(function () {
		var url  = $('.upload-head-form').attr('action');
		var data = $('.upload-head-form').serialize();
		loading('正在保存，请稍候...');
		$.ajax({
			type: "post",
			url: url,
			data : data,
			success : function(data){
				removeLoading();
				if(data.code == 1){
					msgbox(data.msg);
				}else{
					msgbox(data.msg, 'error');
				}
				if(data.url){
					jumpurl(data.url);
				}
			},
			error :function (data) {
				removeLoading();
				msgbox('请求失败，请稍候再试！','error');
			}
		});
	});
	$("<link>").attr({ 
		rel: "stylesheet",
		type: "text/css",
		href: "/public/js/webuploader/webuploader.css"
	}).appendTo("head");
	$.getScript("/public/js/webuploader/webuploader.js", function () {
		// Web Uploader实例
		var uploader = WebUploader.create({
			// 自动上传。
        	auto: true,
			// swf文件路径
			swf: '/public/js/webuploader/Uploader.swf',
			// 文件接收服务端。
			server: '/file/upload.html',
			// 选择文件的按钮。可选。
			// 内部根据当前运行是创建，可能是input元素，也可能是flash.
			pick: '.filePicker-head',
			 // 只允许选择图片文件。
			accept: {
					mimeTypes: 'image/*'
			},
			// 验证文件总大小是否超出限制
			// fileSizeLimit : 3242880,
			// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
			resize: false
		});

		// 当有文件添加进来的时候
		uploader.on( 'fileQueued', function( file ) {
			loading();
		});

		// 文件上传过程中创建进度条实时显示。
		uploader.on( 'uploadProgress', function( file, percentage ) {
			
		});

		// 文件上传成功，给item添加成功class, 用样式标记上传成功。
		uploader.on( 'uploadSuccess', function( file, resporse ) {
			if(resporse.status == 200){
				var file_id  = resporse.data.file_id;
				var file_url = resporse.data.file_url;
				var is_pic   = resporse.data.is_pic;

				img_width  = resporse.data.img_width;
				img_height = resporse.data.img_height;
				img_ratio  = img_width / img_height;
				div_width  = $('.upload-img').width();
				div_height = Math.round(div_width / img_ratio);

				$('.upload-img').attr('src', file_url);
				$('.crop-preview-big img').attr('src', file_url);
				$('.crop-preview-small img').attr('src', file_url);
				$('.file_id').val(file_id);

				$('.upload-img').show();
				$('.reupload-head').show();
				$('.upload-file-btn').hide();

				$('.crop-x1').val(0);
				$('.crop-y1').val(0);
				$('.crop-x2').val(190);
				$('.crop-y2').val(190);
				$('.img-width').val(div_width);
				$('.img-height').val(div_height);

				imgAreaSelectApi = crop_img();
			}else{
				var msg = resporse.info;
				msgbox(msg ? msg : '上传失败！', 'error');
				$( '#' + file.id ).remove();
			}
		});

		// 文件上传失败，现实上传出错。
		uploader.on( 'uploadError', function( file, reason ) {
			console.log(file);
			console.log(reason);
			msgbox('上传失败！', 'error');
		});

		// 完成上传完了，成功或者失败，先删除进度条。
		uploader.on( 'uploadComplete', function( file ) {
			removeLoading();
		});
		uploader.on('error', function (type) {
			if(type == 'Q_EXCEED_NUM_LIMIT'){
				msgbox('上传数量超限！');
			}
			if(type == 'Q_EXCEED_SIZE_LIMIT'){
				msgbox('上传文件大小超过2M限制！');
			}
			if(type == 'Q_TYPE_DENIED'){
				msgbox('文件类型不对，仅限：{$upload_ext}');
			}
		})
	});
});

</script>

{include file="public/footer" /}